<template>
  <div class="collect">
    <header>
      <i class="icon iconfont icon-back" @click="back"></i>收藏
    </header>
    <scroller ref="listScroll" class="collect-menu" :probe-type="2" :data="collectStories">
      <news-list :data="collectStories"></news-list>
    </scroller>
  </div>
</template>
<script>
  import NewsList from 'components/newsList/newsList'
  import Scroller from 'components/scroller/scroller'
  import {
    mapGetters
  } from '../../../node_modules/_vuex@2.5.0@vuex';
  import {
    mapMutations
  } from "vuex";
  export default {
    data() {
      return {

      }
    },
    computed: {
      ...mapGetters([
        "collectStories"
      ])
	},
	mounted() {
		let ids = this.collectStories.map(item => item.id);
        this.addStoriesId({type: 'init', ids: ids}); // 保存所有新闻的ID
	},
    methods: {
      back() {
        this.$router.go(-1);
	  },
	  ...mapMutations({
		  addStoriesId: 'ADD_STORIES_ID'
	  })
    },
    components: {
      NewsList,
      Scroller
    }
  }

</script>
<style lang="less" scoped>
  .collect {
    header {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 20px;
      color: #ffffff;
      background-color: #26a2ff;
      z-index: 5;
      .icon {
        float: left;
        font-size: 22px;
        margin-left: 10px;
      }
    }
    .collect-menu {
      padding-top: 44px;
    }
  }

</style>
